<template>
  <div id="creditorindex">
    <c-title :hide="false" text="债权人"></c-title>
    <div class="headTop" v-if="userInfo.member">
      <div class="headImg">
        <div class="img">
          <img :src="userInfo.member.avatar" alt="" />
        </div>
        <div class="name">{{ userInfo.member.nickname }}</div>
      </div>
      <div class="ticket">
        <div class="ticket_txt">总提货券</div>
        <div class="ticket_price">
          ￥{{ (userInfo.common_credit + userInfo.frozen_credit).toFixed(2) }}
        </div>
      </div>
      <div class="headTopList">
        <div class="headTopLis">
          <div class="price">￥{{ userInfo.common_credit }}</div>
          <div class="txt">{{plugin_setting?plugin_setting.common_credit_name:'消费账户'}}</div>
        </div>
        <div class="headTopLis">
          <div class="price">￥{{ userInfo.frozen_credit }}</div>
          <div class="txt">锁定账号</div>
        </div>
        <div class="headTopLis">
          <div class="price">{{ userInfo.order_count }}</div>
          <div class="txt">已完成订单数</div>
        </div>
      </div>
    </div>
    <div class="contenBox">
      <div class="contenlis" v-for="(item, index) in listData">
        <div class="contenlis_top">
          <div class="contenlis_topLeft">
            <div class="img" v-if="item.has_one_debtor_member">
              <img :src="item.has_one_debtor_member.avatar" alt="" />
            </div>
            <div class="user">
              <div class="nameTxt">{{ item.has_one_debtor.name }}</div>
              <div class="time">化债期：{{ item.end_time_str }}</div>
            </div>
            <div
              class="shopBtn"
              v-if="item.is_expire == 0 && item.status == 1"
              @click="toShop(item.has_one_debtor.id)"
            >
              进店
            </div>
          </div>
        </div>
        <div class="contenlis_lis">
          <div class="contenlis_lisline">
            <div>总提货券:</div>
            <div class="contenlis_lisline_Price">
              ￥{{ item.sum_credit }}
            </div>
          </div>
          <div class="contenlis_lisline">
            <div>{{plugin_setting?plugin_setting.common_credit_name:'消费账户'}}:</div>
            <div class="contenlis_lisline_Price">
              ￥{{ item.common_credit }}
            </div>
          </div>
          <div class="contenlis_lisline">
            <div>{{plugin_setting?plugin_setting.frozen_credit_name:'锁定账户'}}:</div>
            <div class="contenlis_lisline_Price">
              ￥{{ item.frozen_credit }}
            </div>
          </div>
          <div class="contenlis_lisline">
            <div>订单数：</div>
            <div class="contenlis_lisline_Price">
              {{ item.has_many_order_count }}
            </div>
          </div>
        </div>
        <div class="cardRenew">
          <div class="cardRenewleft" v-if="item.has_one_owner">
            身份有效期：{{ item.has_one_owner.end_time_str }}
          </div>
          <div
            class="cardRenewRight"
            v-if="item.has_one_owner && (item.has_one_owner.status == '-1' || item.has_one_owner.status == '1')"
            @click="renewTap(item)"
          >
            续费
          </div>
        </div>
      </div>
    </div>
    <div class="posBtn set-pc-style">
      <div class="posBtnView" @click="toApply">债权人申请</div>
    </div>
    <van-popup
      v-model="RenewShow"
      position="bottom"
      :style="{ height: '15.36rem', borderRadius: '0.31rem 0.31rem 0rem 0rem' }"
      closeable
    >
      <div class="shopShowTxt">续费</div>
      <div class="flexCell">
        <div>当前拥有商品数量：{{ owner_goods_count }}</div>
        <div class="right">
          <div class="pay" @click="goGoods">
            购买商品
            <i class="iconfont icon-member_right"></i>
          </div>
        </div>
      </div>
      <div class="flexCell">
        <div>充值数量</div>
        <div class="right">
          <van-stepper
            class="pay"
            v-model="goodsTotal"
            theme="round"
            button-size="22"
          />
        </div>
      </div>
      <div class="btn" @click="renewPost">续费</div>
    </van-popup>
  </div>
</template>
<script>
import { Toast } from "vant";
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      RenewShow: false,
      listData: [],
      renewUserId: "",
      // 债权人拥有商品次数
      owner_goods_count: "",
      // 债权人拥有商品id
      owner_goods_id: "",
      goodsTotal: 1,
      userInfo:[],
      plugin_setting:{},

      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
    };
  },
  activated() {
    this.getdebtListInit();
    this.getData();
    this.getdebtList();
    this.plugin_setting = JSON.parse(localStorage.getItem("plugin_setting")).debt_shop;
    this.RenewShow = false;
  },
  methods: {
    toShop(id) {
      this.$router.push(
        this.fun.getUrl("debtorShop", {
          kid: id,
          member_type: 1,
        })
      );
    },
    toApply() {
      this.$router.push(this.fun.getUrl("debtapply", { type: 1 }));
    },
    renewTap(item) {
      this.RenewShow = true;
      this.renewUserId = item.has_one_owner.id;
      this.getApplyData();
    },
    getdebtListInit() {
      this.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
      this.listData = [];
    },
    renewPost() {
      if (this.goodsTotal > this.owner_goods_count) {
        Toast("拥有商品数量不足");
        return;
      }
      let json = {
        id: this.renewUserId,
        count: this.goodsTotal,
      };
      let urlStr =
        "plugin.debt-shop.frontend.debt-member.rechargeDebtMemberTime";
      $http
        .get(urlStr, json, "加载中")
        .then((response) => {
          if (response.result === 1) {
            this.RenewShow = false;
            this.$dialog.alert({ message: response.msg }).then(() => {
              this.getdebtListInit();
              this.getData();
              this.getdebtList();
            });
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getApplyData() {
      $http
        .get("plugin.debt-shop.frontend.debt-member.applyData", {}, "加载中")
        .then((response) => {
          if (response.result === 1) {
            this.owner_goods_count = response.data.owner_goods_count;
            this.owner_goods_id = response.data.owner_goods_id;
            this.vip_goods_id = response.data.vip_goods_id;
            this.vip_goods_count = response.data.vip_goods_count;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goGoods() {
      this.$router.push(this.fun.getUrl("goods", { id: this.owner_goods_id }));
    },
    getData() {
      $http
        .get(
          "plugin.debt-shop.frontend.debt-member.getDebtData",
          { member_type: 1 },
          "加载中"
        )
        .then((response) => {
          if (response.result === 1) {
            this.userInfo = response.data;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getdebtList() {
      $http
        .post("plugin.debt-shop.frontend.owner.debtorList", {}, "加载中")
        .then((response) => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.page = 1;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
            this.listData = response.data.data;
          } else {
            Toast(response.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //获取更多数据
    getMoreData() {
      const that = this;
      that.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        $http
          .post(
            "plugin.debt-shop.frontend.owner.debtorList",
            {
              page: that.page,
            },
            "加载中"
          )
          .then(
            (response) => {
              this.isLoadMore = true;
              if (response.result === 1) {
                var myData = response.data.data;
                this.listData = this.listData.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
                return;
              }
            },
            function (response) {
              // error callback
            }
          );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.shopShowTxt {
  width: 100%;
  text-align: center;
  font-size: 1.06rem;
  color: #202020;
  padding-top: 0.97rem;
  margin-bottom: 2rem;
}

.flexCell {
  padding: 0 0.91rem 0 1.06rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.94rem;

  .right {
    display: flex;
    align-items: center;

    .pay {
      display: flex;
      align-items: center;
      font-size: 0.75rem;
      color: #f14e4e;
    }
  }
}

.btn {
  margin: 0 auto;
  width: 20.31rem;
  height: 2.5rem;
  background-color: #f15353;
  border-radius: 1.25rem;
  font-size: 0.88rem;
  color: #fff;
  text-align: center;
  line-height: 2.5rem;
}

.posBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.44rem;
  background-color: #fff;
  box-shadow: 0 -0.06rem 0.66rem 0 rgba(206, 206, 206, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;

  .posBtnView {
    width: 19.13rem;
    height: 2.5rem;
    background-color: #f15353;
    border-radius: 1.25rem;
    font-size: 0.94rem;
    color: #fff;
    text-align: center;
    line-height: 2.5rem;
  }
}

.contenBox {
  padding: 0.63rem 0.63rem;
  box-sizing: border-box;
  padding-bottom: 4rem;

  .contenlis {
    background-color: #fff;
    border-radius: 0.31rem;
    padding: 0.66rem 0.81rem;
    box-sizing: border-box;
    margin-bottom: 0.65rem;

    .cardRenew {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #7e7e7e;
      font-size: 0.69rem;

      .cardRenewRight {
        width: 4.09rem;
        height: 1.78rem;
        background-color: #f15353;
        border-radius: 0.88rem;
        font-size: 0.69rem;
        color: #fff;
        text-align: center;
        line-height: 1.78rem;
      }
    }

    .contenlis_lis {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 1rem;

      .contenlis_lisline {
        width: 50%;
        margin-bottom: 0.78rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 0.69rem;
        color: #393939;

        .contenlis_lisline_Price {
          flex: 0.8;
          text-align: left;
          color: #f14e4e;
          font-size: 0.69rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .contenlis_top {
      display: flex;
      justify-content: space-between;

      .contenlis_topLeft {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .shopBtn {
          width: 3.13rem;
          height: 1.44rem;
          background-color: #f15353;
          font-size: 0.63rem;
          color: #fff;
          border-radius: 0.72rem;
          text-align: center;
          line-height: 1.44rem;
        }

        .user {
          flex: 1;
          margin-left: 0.53rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          overflow: hidden;

          .nameTxt {
            color: #2f2f2f;
            font-size: 0.88rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            text-align: left;
          }

          .time {
            font-size: 0.63rem;
            color: #7e7e7e;
          }
        }

        .img {
          width: 2.5rem;
          height: 2.5rem;
          background-color: #b6b6b6;
          border-radius: 1.25rem;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}

.headTop {
  width: 23.44rem;
  background-image: url("../../../assets/images/debt/debtb2.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 1.41rem 0.94rem;
  padding-bottom: 1.03rem;

  .headTopList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.9rem;

    .headTopLis {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      overflow: hidden;

      .price {
        width: 100%;
        font-size: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .txt {
        font-size: 0.75rem;
      }
    }
  }

  .ticket {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.94rem;
    color: #fff;
    padding-bottom: 0.63rem;
    border-bottom: 1px solid #91ccf4;
    margin-top: 0.8rem;
  }

  .headImg {
    display: flex;

    .name {
      margin-left: 0.66rem;
      font-size: 1.06rem;
      color: #fff;
    }

    .img {
      width: 3.56rem;
      height: 3.56rem;
      background-color: #fff;
      border-radius: 100%;

      img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
  }
}
</style>
